<template>
  <div class="publish-card">
    <Avatar :src="avatar" />
    <div class="content">
      <el-input v-model="content" type="textarea" :rows="5" placeholder="想说点什么..." maxlength="200" show-word-limit
        resize="none" class="publish-input" />
      <div class="bottom-container">
        <div class="imgList">
          <div class="img-item" v-for="(item, index) in imageList" :key="index">
            <el-image :src="item.url" fit="cover" :initial-index="index"
              :preview-src-list="imageList.map(item => item.url)" />
            <el-icon style="font-size: 16px;" class="del-icon" @click="delImg(index)">
              <CircleCloseFilled />
            </el-icon>
          </div>
        </div>
        <div class="publish-actions">
          <Emoji @click-emoji="handleClickEmoji" />
          <el-upload v-if="showImage" v-model:file-list="imageList" :limit="9" :show-file-list="false"
            :on-change="handleImageChange" :auto-upload="false" class="publish-upload">
            <el-tooltip content="上传图片" placement="top">
              <el-icon style="font-size: 22px;">
                <PictureFilled />
              </el-icon>
            </el-tooltip>
          </el-upload>
          <el-button circle v-permission text :disabled="content.length === 0" title="发送" 
            @click="submit">
            <el-tooltip content="发送" placement="top">
              <el-icon style="font-size: 22px;">
                <MynauiSend />
              </el-icon>
            </el-tooltip>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import Avatar from '@/components/avator'
import Emoji from '@/components/emoji'
import { useUserStore } from '@/stores/user';
import { PictureFilled, Plus, CircleCloseFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import MynauiSend from '~icons/mynaui/send';
const props =defineProps({
  showImage:{
    type: Boolean,
    default: false
  },
  avatar: {
    type: String,
    default: useUserStore().user?.avatar
  }
})
console.log(props)
const emit = defineEmits(['submit'])
const content = ref('')
const imageList = ref([])
const router = useRouter()
const handleClickEmoji = (emoji) => {
  content.value += emoji || ''
}

const submit = () => {
  // if(!useUserStore().token){
  //   ElMessageBox.confirm('请先登录', '提示', {
  //     confirmButtonText: '去登录',
  //     cancelButtonText: '取消',
  //     type: 'warning',
  //   }).then(() => {
  //     router.push('/login')
  //   }).catch(() => {
  //     ElMessage.info('取消了')
  //   })
  //   return
  // }
  if (content.value.trim() === '') {
    ElMessage.warning('请输入内容')
    return
  }
  emit('submit', {
    content: content.value,
    imageList: imageList.value
  })
  // content.value = ''
  // imageList.value = []
}

// 图片上传
const handleImageChange = (_file, fileList) => {
  fileList.forEach(f => {
    if (!f.url && f.raw) {
      f.url = URL.createObjectURL(f.raw)
    }
  })
  imageList.value = fileList
}
// 删除图片
const delImg = (index) => {
  imageList.value.splice(index, 1)
}
</script>
<style lang="scss" scoped>
.publish-card {
  display: flex;
  padding: 18px 12px;
  gap: 12px;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;

  // border: 1px solid #e0e7ef;
  // margin: 18px 10px;
  .publish-input {
    // --el-input-border-color: transparent;
    // --el-input-hover-border-color:transparent;
    border-radius: 10px;
    font-size: 16px;
    border: none;
    box-shadow: none;
  }

  .bottom-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .imgList {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;

      .img-item {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;

        // z-index: 0;
        // transition: all 0.1s ease;
        &:hover {
          // 阴影
          // transform: scale(1.05) translateY(-2px);
          box-shadow: 0 0 10px #8ec5fc55;
        }

        .el-image {
          width: 100%;
          height: 100%;
          cursor: pointer;
        }

        .del-icon {
          position: absolute;
          top: 2px;
          right: 2px;
          cursor: pointer;
          // width: 20px;
          // height: 20px;
          // background-color: rgba(0, 0, 0, .5);
          // border-radius: 50%;
          // color: #fff;
          // text-align: center;
          // line-height: 20px;
          // cursor: pointer;
        }
      }
    }

    .publish-actions {
      :deep(.el-upload--picture-card) {
        --el-upload-picture-card-size: 80px;
      }

      display: flex;
      align-items: center;
      justify-content: flex-end;
      // justify-content: space-between;
      gap: 12px;

      // margin-top: 8px;
      .el-icon {
        &:hover {
          color: var(--el-color-primary);
        }
      }

      .publish-upload {
        display: flex;
        align-items: center;
        // flex: 1;
      }

      .submit-btn {
        cursor: pointer;
      }
    }
  }
}
</style>